<?php
// 定义音乐目录
define('MUSIC_DIR', 'music/');

// 初始化目录
if (!file_exists(MUSIC_DIR)) {
    mkdir(MUSIC_DIR, 0755, true);
}

// 获取音乐文件
$musicFiles = [];
if (is_dir(MUSIC_DIR)) {
    $files = scandir(MUSIC_DIR);
    foreach ($files as $file) {
        if (pathinfo($file, PATHINFO_EXTENSION) === 'mp3') {
            $musicFiles[] = $file;
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <style>
        .timer-btn {
            padding: 12px 24px;
            font-size: 1em;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: block;
            margin-bottom: 25px;
        }
        .timer-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.15);
        }
        .timer-btn:active {
            transform: translateY(0);
        }
        .button-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 25px;
        }
    </style>
    <title>音乐播放器</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        h1 { font-size: 2em; margin-bottom: 20px; }
        .music-item { 
            margin: 10px 0; 
            padding: 10px; 
            background: #f5f5f5;
            display: flex;
            align-items: center;
        }
        button { 
            padding: 5px 10px; 
            background: #1a73e8; 
            color: white; 
            border: none; 
            cursor: pointer;
            margin-right: 10px;
        }
        audio { width: 100%; margin-top: 5px; }
    </style>
    <script>
        function togglePlay(id) {
            const audio = document.getElementById(id);
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        }
    </script>
</head>
<body>
    <h1>音乐列表</h1>
    <div class="button-container">
        <a href="index.php" class="timer-btn">返回首页</a>
    </div>
    
    <?php if (empty($musicFiles)): ?>
        <p>没有找到音乐文件，请将MP3文件放入music目录</p>
    <?php else: ?>
        <?php foreach ($musicFiles as $file): ?>
            <div class="music-item">
                <div style="display: flex; flex-direction: column; width: 100%;">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <button class="timer-btn" onclick="togglePlay('<?= $file ?>')" style="margin-right: 10px;">播放/暂停</button>
                        <span style="flex-grow: 1;"><?= htmlspecialchars($file) ?></span>
                    </div>
                    <audio id="<?= $file ?>" src="<?= MUSIC_DIR . htmlspecialchars($file) ?>" controls style="width: 100%;"></audio>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</body>
</html>